<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .content {
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: large;
    }

    body {
        background-size: 100%;
        background-image: url("http://39.106.48.234:3000/images/src_2.jpg");
    }

    #tab {
        z-index: 9999;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 80px;
        width: 100%;
        position: fixed;
        background-color: black;
        vertical-align: baseline;
    }

    .tab_item {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: 20px;
        width: 80px;
        height: 50px;
        position: relative;
        text-align: center;
        line-height: 50px;
        display: inline-block;
        color: aliceblue;
    }

    .tab_item:hover {
        background-color: aliceblue;
        color: black;
    }

    #last {
        margin-right: 20%;
    }

    .login {
        background-color: rgb(240, 248, 255, 0.7);
        margin: 0 20%;
        margin-top: 80px;
        width: 60%;
        height: 400px;
        position: relative;
        display: block;
        border-radius: 20px;
    }

    .login .left{
        display: inline-block;
        width: 40%;
        height: 80%;
    }

    .login .right{
        display: inline-block;
        width: 40%;
        height: 80%;
    }

    .login .left img{
        margin: 10% 0;
        overflow: hidden;
    }
</style>

<body>
    <div id="tab">
        <div class="tab_item">item1</div>
        <div class="tab_item">item2</div>
        <div class="tab_item">item3</div>
        <div class="tab_item" id="last">item4</div>
    </div>
    <div class="content">
        <div style="width:100%; height:80px"></div>
        <div class="login">
            <div class="left">
                <img width="100%" height="100%" src="http://39.106.48.234:3000/images/src_2.jpg" alt="text">
            </div>
            <div class="right"></div>
        </div>
    </div>
</body>
<script>
    let element = document.getElementsByClassName('title');
    if (element.length == 0) {
        console.error("no element");
    }
    else {
        fetch("http://39.106.48.234:3000/users").then(function (res) {
            if (res.statusText == 'OK') {
                res.text().then(function (text) {
                    element[0].textContent = text;
                });
            }
            else {
                console.error('fetch fail');
            }
        })
    }
</script>

</html>